<template>
    <NavBar></NavBar>
    <ContentField>
        <h2 style="text-align:center;">系统默认查询题集</h2>

        <ContentField style="margin-bottom: 20px;">
            <div class="container text-center">
                <div class="row row-cols-2 row-cols-lg-5 g-2 g-lg-3">
                    <div class="col" v-for="(pro, index) in pros" :key="pro.id">
                    <button class="btn btn-secondary" style="width:20%; height:30px; border-radius: 5px; text-align: center;" @click="answerPro(pro.id)">{{ index + 1 }}</button>
                    </div>
                </div>
            </div>
        </ContentField>

        <!-- 分页 -->
        <span aria-label="Page navigation example">
            <ul class="pagination" style="float:left">
                <li class="page-item disabled">
                    <a class="page-link">每页&nbsp;&nbsp;<span style="color:blue;">{{ pageSize }}</span>&nbsp;&nbsp;条数据</a>
                </li>
                <li class="page-item disabled">
                    <a class="page-link" :pageNum="pageNum">当前为第&nbsp;&nbsp;<span style="color:blue;">{{ pageNum }}</span>&nbsp;&nbsp;页</a>
                </li>
                <li class="page-item disabled">
                    <a class="page-link">总共&nbsp;&nbsp;<span style="color:blue;">{{ totalPage }}</span>&nbsp;&nbsp;页</a>
                </li>
            </ul>

            <ul class="pagination" style="float:right">
                <li class='page-item'>
                    <a v-if="isFirstPage" class="page-link disabled">上一页</a>
                    <a v-else class="page-link" @click="getPage( proType,prePage,pageSize )">上一页</a>
                </li>

                <li class="page-item" v-for="(item, index) in totalPage" :key="index">
                    <a  class="page-link" @click="getPage(proType, item,pageSize)">{{ item }}</a>
                </li>
                <li class= 'page-item'>
                    <a  v-if="isLastPage" class="page-link disabled">下一页</a>
                    <a  v-else class="page-link" @click="getPage(proType, nextPage,pageSize )">下一页</a>  
                </li>
            </ul>
        </span>

    </ContentField>
</template>

<script>

import NavBar from "@/components/student/NavBar/NavBar.vue";
import ContentField from '@/components/commons/ContentField.vue';
import {ref} from 'vue';
import $ from 'jquery';
import {useStore} from 'vuex';
import { useRoute } from 'vue-router';
import router from '@/router/index';

export default{
    name: 'S_querySet',
    components: {
        NavBar,
        ContentField,
    },
    setup(){

        const store = useStore();
        const route = useRoute();

        let proType = route.params.proType;
        let pros = ref([]);  //当前题集的所有题号

        let PageNum = 1;  //当前页数
        let PageSize = 15; //每页数据条数
        let pageNum = ref('');  //当前页数  变量  用于前端渲染
        let pageSize = ref('');  //每页数据条数  变量  用于前端渲染
        let totalNum = ref('');  //总条数
        let totalPage = ref(''); //总页数
        let isFirstPage = ref('');  //是否为第一页
        let isLastPage = ref('');  //是否为最后一页
        let nextPage = ref("");  //下一页
        let prePage = ref("");   //前一页


        pageSize.value = 1;
        pageNum.value = 5;
        totalPage.value = 3;
        isFirstPage.value = true;
        isLastPage.value = false;
        nextPage.value = 2;
        prePage.value = 1;

        const updatePageInfo = (pageNum,pageSize)=>{  //更新当前页数和每页大小
            PageNum = pageNum.value;
            PageSize = pageSize.value;
        }

        const getPage = (proType,PageNum,PageSize)=>{   //按页查询用户信息

            // console.log("========");
            // console.log(proType);
            // console.log(PageNum);
            // console.log(PageSize);
            // console.log("========");

            $.ajax({
            url: 'http://localhost:8090/sls/student/getPageInfo4StuByProType/' +proType + '/' + PageNum +'/' + PageSize ,
            type: "get",
            headers: {
                Authorization: "Bearer " +store.state.user.token,
            },
            success(resp){
                //console.log(resp);

                pros.value = resp.list;  //获取所有题集信息

                totalNum.value = resp.total;
                totalPage.value = resp.pages;
                pageNum.value = resp.pageNum;
                pageSize.value = resp.pageSize;
                isFirstPage.value = resp.isFirstPage;
                isLastPage.value = resp.isLastPage;
                nextPage.value = resp.nextPage;
                prePage.value = resp.prePage;

                updatePageInfo(pageNum, pageSize);        
            },
            error(resp){
                console.log(resp);
            }
            });
            }

            getPage(proType, PageNum, PageSize);

            const answerPro = (id) => {
                router.push({name: 'answerPro', params: {id : id}});
            }




        return{

           proType,
           pros,

           updatePageInfo,
           getPage,
           answerPro,


           PageNum,
           PageSize,
           pageNum,
           pageSize,
           totalNum,
           totalPage,
           isFirstPage,
           isLastPage,
           nextPage,
           prePage,
    }


    }
}
</script>







